<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                template="./../pages/index.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core">
    <ui:define name="title"><title>IDU Đà Nẵng - Đăng ký thành viên</title></ui:define>
    <ui:define name="content">
        <div class="row">
            <div class="row">
                <h2>REGISTRATION</h2>
                <hr style="margin-bottom: 50px;" />
            </div>
            <h:form id="register">
                <div class="row" style="margin-bottom: 10px">
                    <label for="username" class="col-md-3">
                        Tên đăng nhập:
                    </label>
                    <div class="col-md-4">
                        <h:inputText styleClass="form-control" id="username" value="#{userManagement.user.userName}"
                                     required="true" requiredMessage="Bạn không được để trống trường này!"
                                     validatorMessage="Tên đăng phập có độ dài từ 6 tới 32 ký tự">
                            <f:validateLength minimum="6" maximum="32" />
                        </h:inputText>
                    </div>
                    <div class="col-md-5">
                        <h:message style="color:red;" for="username" />
                    </div>
                </div>
                <div class="row" style="margin-bottom: 10px">
                    <label for="password" class="col-md-3">
                        Mật khẩu:
                    </label>
                    <div class="col-md-4">
                        <h:inputSecret styleClass="form-control" id="password" value="#{userManagement.user.pwd}"
                                       required="true" requiredMessage="Bạn không được để trống trường này!">
                            <f:validator validatorId="passwordValidator" />
                            <f:attribute name="confirmPassword" value="#{confirmPassword}" />
                        </h:inputSecret>
                    </div>
                    <div class="col-md-5">
                        <h:message style="color:red;" for="password" />
                    </div>
                </div>
                <div class="row" style="margin-bottom: 10px">
                    <label for="confirmPassword" class="col-md-3">
                        Xác nhận mật khẩu:
                    </label>
                    <div class="col-md-4">
                        <h:inputSecret styleClass="form-control" id="confirmPassword" binding="#{confirmPassword}"
                                       required="true" requiredMessage="Bạn không được để trống trường này!"/>
                    </div>
                    <div class="col-md-5">
                        <h:message style="color:red;" for="confirmPassword" />
                    </div>
                </div>
                <div class="row" style="margin-bottom: 10px">
                    <label for="fullname" class="col-md-3">
                        Họ và tên:
                    </label>
                    <div class="col-md-4">
                        <h:inputText class="form-control" id="fullname" value="#{userManagement.user.fullName}" 
                                     required="true" requiredMessage="Bạn không được để trống trường này!"
                                     validatorMessage="Họ và tên có độ dài từ 8 tới 50 ký tự.">
                            <f:validateLength minimum="8" maximum="50" />
                        </h:inputText>
                    </div>
                    <div class="col-md-5">
                        <h:message style="color:red;" for="fullname" />
                    </div>
                </div>
                <div class="row" style="margin-bottom: 10px">
                    <label for="email" class="col-md-3">
                        Email:
                    </label>
                    <div class="col-md-4">
                        <h:inputText class="form-control" id="email" value="#{userManagement.user.email}" 
                                     required="true" requiredMessage="Bạn không được để trống trường này!"
                                     validatorMessage="Nhập lại email. Ex: Yourname@domain.com">
                            <f:validateRegex
                                pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
                        </h:inputText>
                    </div>
                    <div class="col-md-5">
                        <h:message style="color:red;" for="email" />
                    </div>
                </div>
                <div class="row" style="margin-bottom: 10px">
                    <label for="dayOfBirth" class="col-md-3">
                        Ngày sinh:
                    </label>
                    <div class="col-md-4">
                        <script>
                            $(function () {
                                $(".datepicker").datepicker({
                                    dateFormat: "dd/mm/yy",
                                    changeYear: true,
                                    changeMonth: true,
                                    maxDate: 'today',
                                    showOn: "button",
                                    buttonImage: "/IDUDaNang/resources/images/icon/icon-calendar.gif",
                                    buttonImageOnly: true,
                                    buttonText: "Select date"
                                });
                            });
                        </script>
                        <h:inputText class="datepicker input-datepicker" readonly="true"
                                     value="#{userManagement.user.dayOfBirth}" >
                            <f:convertDateTime pattern="dd/MM/yyyy"/>
                        </h:inputText>
                    </div>
                    <div class="col-md-5">
                        <h:message style="color:red;" for="dayOfBirth" />
                    </div>
                </div>
                <div class="row" style="margin-bottom: 10px">
                    <label for="sex" class="col-md-3">
                        Giới tính:
                    </label>
                    <div class="col-md-4">
                        <h:selectOneMenu styleClass="form-control" id="sex" value="#{userManagement.user.gender}">
                            <f:selectItem itemValue="1" itemLabel="Nam" /> 
                            <f:selectItem itemValue="0" itemLabel="Nữ" />
                        </h:selectOneMenu>
                    </div>   
                    <div class="col-md-5">
                        <h:message style="color:red;" for="sex" />
                    </div>
                </div>
                <div class="row" style="margin-bottom: 10px">
                    <label for="phone" class="col-md-3">
                        Số điện thoại:
                    </label>
                    <div class="col-md-4">
                        <h:inputText class="form-control" id="phone" value="#{userManagement.user.phoneNumber}"
                                     onkeyup="$(this).val($(this).val().replace(/[^0-9]/g, ''));"/>
                    </div>
                    <div class="col-md-5">
                        <h:message style="color:red;" for="phone" />
                    </div>
                </div>

                <div class="row" style="margin-bottom: 10px">
                    <div class="col-md-3">
                    </div>
                    <div class="col-md-5">
                        <h:commandButton id="btnRegister" styleClass="btn btn-info" value="Register" 
                                         action="#{userManagement.createUser(event)}" />
                        <h:commandButton styleClass="btn btn-warning" value="Reset" action="#" 
                                         type="reset" style="margin-left: 15px"/>
                    </div>
                    <div class="col-md-4">
                        <h:messages id="msg" globalOnly="true" showDetail="true" style="color: red"/>
                    </div>
                </div>
            </h:form>
        </div>  
    </ui:define>
    <ui:define name="right-content">
        
    </ui:define>

</ui:composition>
